<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>常用颜色表</title>

</head>
<style>
	.box{
		width: 100%;
	
	}
	.head{
		width: 100%;
		height: 60px;
		background-color: #fff;
		box-shadow:5px 2px 10px 2px  #F3F5F8;
	
		margin-bottom: 50px;
	}
	.head-content{
		width: 75%;
		height: 60px;
		margin: 0 auto;
		
	}
	.head-content h1{
		color: #6a6969;
		line-height: 60px;
	}
	.content{
		width: 80%;
		margin: 0 auto;
		
	}

	.Color{
		width: 200px;
		height: 200px;
		border-radius: 10px;
		background-color: #fff;
		box-shadow:2px 2px 10px 0px rgba(122,122,122,0.8);
		display: inline-block;
		margin:20px;
	}
	.Color-head{
		height: 30px;
		color:#333435;
	}

	#color-1{
		background-color:#23262E;
		width: 130px;
		height: 130px;
		border-radius: 100%;
		
	}
	#color-2{
		background-color:#f3f5f8;
		width: 130px;
		height: 130px;
		border-radius: 100%;
		
	}
	#color-3{
		background-color:#F5F5F5;
		width: 130px;
		height: 130px;
		border-radius: 100%;
	}
	#color-4{
		background-color:#676a6d;
		width: 130px;
		height: 130px;
		border-radius: 100%;
	}
	#color-5{
		background-color:#0081c2;
		width: 130px;
		height: 130px;
		border-radius: 100%;
	}
	#color-6{
		background-color:#41B314;
		width: 130px;
		height: 130px;
		border-radius: 100%;
	}
	#color-7{
		background-color:#f0ad4e;
		width: 130px;
		height: 130px;
		border-radius: 100%;
	}
	#color-8{
		background-color:#d9534f;
		width: 130px;
		height: 130px;
		border-radius: 100%;
	}
	#color-9{
		background-color:#777;
		width: 130px;
		height: 130px;
		border-radius: 100%;
	}
	#color-10{
		background-color:#dff0d8;
		width: 130px;
		height: 130px;
		border-radius: 100%;
	}#color-11{
		background-color:#d9edf7;
		width: 130px;
		height: 130px;
		border-radius: 100%;
	}
	#color-12{
		background-color:#f2dede;
		width: 130px;
		height: 130px;
		border-radius: 100%;
	}
	#color-13{
		background-color:#fcf8e3;
		width: 130px;
		height: 130px;
		border-radius: 100%;
	}
	#color-14{
		background-color:#f44336;
		width: 130px;
		height: 130px;
		border-radius: 100%;
	}
	#color-15{
		background-color:#ff9800;
		width: 130px;
		height: 130px;
		border-radius: 100%;
	}
	#color-16{
		background-color:#30cc7b;
		width: 130px;
		height: 130px;
		border-radius: 100%;
	}
	#color-17{
		background-color:#2196F3;
		width: 130px;
		height: 130px;
		border-radius: 100%;
	}
	#color-18{
		background-color:#E96562;
		width: 130px;
		height: 130px;
		border-radius: 100%;
	}
	#color-19{
		background-color:#414E63;
		width: 130px;
		height: 130px;
		border-radius: 100%;
	}
	#color-20{
		background-color:#1ebfae;
		width: 130px;
		height: 130px;
		border-radius: 100%;
	}
	#color-21{
		background-color:#26a69a;
		width: 130px;
		height: 130px;
		border-radius: 100%;
	}
	#color-22{
		background-color:#A333C8;
		width: 130px;
		height: 130px;
		border-radius: 100%;
	}
	#color-23{
		background-color:#E03997;
		width: 130px;
		height: 130px;
		border-radius: 100%;
	}
	#color-24{
		background-color:#A333C8;
		width: 130px;
		height: 130px;
		border-radius: 100%;
	}
	#color-25{
		background-color:#434A54;
		width: 130px;
		height: 130px;
		border-radius: 100%;
	}
</style>
<body bgcolor="f5f5f5">
	<div class="box">
		<div class="head">
			<div class="head-content">
				<h1>颜色表</h1>
			</div>
		</div>
			<div class="content">
				<div class="Color" align="center">
					<div class="Color-head"><p>001黑色</p></div>
					<div id="color-1"></div>
					<span id="copy-1">#23262E</span>
				</div>
				<div class="Color" align="center">
					<div class="Color-head"><p>002灰白色</p></div>
					<div id="color-2"></div>
					<span id="copy-2">#F3F5F8</span>
				</div>
				<div class="Color" align="center">
					<div class="Color-head"><p>003灰白色</p></div>
					<div id="color-3"></div>
					<span id="copy-3">#F5F5F5</span>
				</div>
				<div class="Color" align="center">
					<div class="Color-head"><p>004灰黑色</p></div>
					<div id="color-4"></div>
					<span id="copy-4">#676a6d</span>
				</div>
				<div class="Color" align="center">
					<div class="Color-head"><p>005蓝色</p></div>
					<div id="color-5"></div>
					<span id="copy-5">#0081c2</span>
				</div>
				<div class="Color" align="center">
					<div class="Color-head"><p>006绿色</p></div>
					<div id="color-6"></div>
					<span id="copy-6">#41B314</span>
				</div>
				<div class="Color" align="center">
					<div class="Color-head"><p>007橙色</p></div>
					<div id="color-7"></div>
					<span id="copy-7">#f0ad4e</span>
				</div>
				<div class="Color" align="center">
					<div class="Color-head"><p>008红色</p></div>
					<div id="color-8"></div>
					<span id="copy-8">#d9534f</span>
				</div>
				<div class="Color" align="center">
					<div class="Color-head"><p>009</p></div>
					<div id="color-9"></div>
					<span id="copy-9">#777</span>
				</div>
				<div class="Color" align="center">
					<div class="Color-head"><p>010</p></div>
					<div id="color-10"></div>
					<span id="copy-10">#dff0d8</span>
				</div>
				<div class="Color" align="center">
					<div class="Color-head"><p>011</p></div>
					<div id="color-11"></div>
					<span id="copy-11">#d9edf7</span>
				</div>
				<div class="Color" align="center">
					<div class="Color-head"><p>012</p></div>
					<div id="color-12"></div>
					<span id="copy-12">#f2dede</span>
				</div>
				<div class="Color" align="center">
					<div class="Color-head"><p>013</p></div>
					<div id="color-13"></div>
					<span id="copy-13">#fcf8e3</span>
				</div>
				<div class="Color" align="center">
					<div class="Color-head"><p>014</p></div>
					<div id="color-14"></div>
					<span id="copy-14">#f44336</span>
				</div>
				<div class="Color" align="center">
					<div class="Color-head"><p>015</p></div>
					<div id="color-15"></div>
					<span id="copy-15">#ff9800</span>
				</div>
				<div class="Color" align="center">
					<div class="Color-head"><p>016</p></div>
					<div id="color-16"></div>
					<span id="copy-16">#30cc7b</span>
				</div>
				<div class="Color" align="center">
					<div class="Color-head"><p>017</p></div>
					<div id="color-17"></div>
					<span id="copy-17">#2196F3</span>
				</div>
				<div class="Color" align="center">
					<div class="Color-head"><p>018</p></div>
					<div id="color-18"></div>
					<span id="copy-18">#E96562</span>
				</div>
				<div class="Color" align="center">
					<div class="Color-head"><p>019</p></div>
					<div id="color-19"></div>
					<span id="copy-19">#414E63</span>
				</div>
				<div class="Color" align="center">
					<div class="Color-head"><p>020</p></div>
					<div id="color-20"></div>
					<span id="copy-20">#1ebfae</span>
				</div>
				<div class="Color" align="center">
					<div class="Color-head"><p>021</p></div>
					<div id="color-21"></div>
					<span id="copy-21">#26a69a</span>
				</div>
				<div class="Color" align="center">
					<div class="Color-head"><p>022</p></div>
					<div id="color-22"></div>
					<span id="copy-22">#A333C8</span>
				</div>
				<div class="Color" align="center">
					<div class="Color-head"><p>023</p></div>
					<div id="color-23"></div>
					<span id="copy-23">#E03997</span>
				</div>
				<div class="Color" align="center">
					<div class="Color-head"><p>024</p></div>
					<div id="color-24"></div>
					<span id="copy-24">#26a69a</span>
				</div>
				<div class="Color" align="center">
					<div class="Color-head"><p>025</p></div>
					<div id="color-25"></div>
					<span id="copy-25" onClick="copy(25)">#434A54</span>
				</div>
			

			</div>
		
		
		
	</div>
</body>
	<script type="text/javascript">
	
	</script>
</html>
